<template>
  <div class="playlist-panel-list-item row items-center no-wrap">
    <div class="index" v-if="video.id === currentVideo!.id">
      <q-icon name="mdi-play" color="accent" size="16px" />
    </div>
    <div class="index text-sub non-selectable" v-else>{{ index }}</div>
    <div class="row q-ml-sm no-wrap info col">
      <q-img :src="video.coverImage" width="140px" height="80px" />
      <div class="column col justify-center">
        <div class="title one-line-text">{{ video.title }}</div>
        <div class="row">
          <q-avatar size="18px">
            <q-img :src="video.creatorAvatar" />
          </q-avatar>
          <div class="text-sub">
            {{ video.creatorName }} · {{ video.createTimeHuman }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Video from 'src/models/Video';
import { ref, computed, PropType } from 'vue';
import HIconNum from '../utils/HIconNum.vue';
import LangChip from '../LanguageChip.vue';
import { useVideoStore } from 'src/stores/video-store';
const videoStore = useVideoStore();
const currentVideo = computed(() => videoStore.currentVideo);
const props = defineProps({
  video: {
    type: Object as PropType<Video>,
    required: true,
  },
  index: {
    type: Number,
    required: true,
  },
});
</script>
<style lang="scss" scoped>
.playlist-panel-list-item {
  width: 100%;
  height: 80px;
  .index {
    width: 16px;
    text-align: center;
  }
  .info {
    background-color: #2b2b2b;
    max-width: 100%;
    .title {
      display: inline;
    }
  }
}
</style>
